<!--考试页面的右侧编辑框-->
<template>
  <div v-if="this.item.id!=-1" class="ChoiceEdit">
    <div class="quesEditBox" >
      <el-form>

<!--        题目题干编辑-->
        <div class="words">
          <span class="titleTip">题目：</span>
          <el-input v-model="item.title" :value="item.title" type="textarea" :autosize="{ minRows: 1}"
            @input="ccccc"
          ></el-input>
        </div>

<!--        题目备注编辑-->
        <div class="words">
          <span class="titleTip">题目备注：</span>
          <el-input v-model="item.remark" :value="item.remark" type="textarea" :autosize="{ minRows: 1}"
                    @input="ccccc"
          ></el-input>
        </div>

<!--        是否必答选项-->
        <div class="optional" >
          <el-checkbox v-model="item.optional" @input="ccccc">是否必答</el-checkbox>
        </div>

<!--        选项编辑-->
        <div class="OP" v-if="item.type==='S'||item.type==='M'">

          <draggable v-model="item.option"
                     :sort="true"
                     :group="{name:'OPGrp',pull:false,put:false}"
                     chosenClass="OpChosen"
                     animation="500"
                     force-fallback="true"
                     handle=".moveBall"
                     @sort="ccccc"
          >
          <!--eslint-disable-next-line vue/require-v-for-key -->
          <div class="OPwords" v-for="(option,opindex) in item.option">
              <span class="titleTip moveBall">选项{{opindex+1}}：</span>
              <el-input v-model="option.description" @input="ccccc"
                        type="textarea" :autosize="{ minRows: 1}"
                        class="optionWord"
              ></el-input>
            <el-button @click="DelThisOption(option,opindex)" circle  icon="el-icon-delete" type="text" style="color:red;" ></el-button>
            </div>
            <el-button slot="footer" @click="AddAnOption" plain  size="mini" style="margin:0 auto">新建选项</el-button>
          </draggable>
        </div>

        <el-button @click="SaveQues"   style="display:block;margin:30px auto">保存本题（请保存后再设置分数、标准答案）</el-button>

        <div class="set">

<!--          是否设置分数-->
          <div class="words" style="display: flex;height:30px;line-height: 30px;">
            <div><el-checkbox v-model="CsetScore">是否设置分数</el-checkbox></div>
            <template v-if="setScore">
              <el-input-number v-model="score" :min="1" size="mini"
              style="margin-left:10px;"
              ></el-input-number>
            </template>
          </div>

<!--          考试页面专有的标答设置-->
          <div class="divwords">
            <div class="divwords" style="width: 100%"><el-checkbox v-model="CsetStandard">是否设置标准答案（提交后自动批改）</el-checkbox></div>
            <div style="width: 100%;" v-if="setStandard">
              <div  class="quesOptionGroup">
                <template v-if="this.item.type=='S'">
                  <el-radio-group   v-model="radio">
                    <el-radio
                        v-for="(option,opindex) in item.option"
                        :key="option.id"
                        :label="option.id"
                        class="quesAnOption"
                    ><span  class="ChecktitleTip">选项{{opindex+1}}：</span>
                      <span class="ChecktitleTip" >{{option.description}}</span>
                    </el-radio>
                  </el-radio-group>
                  <el-button @click="SaveRadio" size="mini" style="display:block;margin:10px auto">保存标准答案和分值</el-button>
                </template>
                <template v-else-if="this.item.type=='M'">
                  <el-checkbox-group v-model="checked">
                    <el-checkbox
                        v-for="(option,opindex) in item.option"
                        :key="option.id"
                        :label="option.id"
                        class="quesAnOption"
                    ><span  class="ChecktitleTip">选项{{opindex+1}}：</span>
                      <span class="ChecktitleTip" >{{option.description}}</span>
                    </el-checkbox>
                  </el-checkbox-group>
                  <el-button @click="SaveChecked"  size="mini" style="display:block;margin:10px auto">保存标准答案和分值</el-button>
                </template>
                <template v-else-if="this.item.type=='F'">
                  <el-input
                      type="textarea"
                      :autosize="{ minRows: 1}"
                      v-model="item.standanswer">
                  </el-input>
                  <el-button @click="SaveAnswer"  size="mini" style="display:block;margin:10px auto">保存标准答案和分值</el-button>

                </template>
              </div>
            </div>
          </div>


        </div>

      </el-form>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import {questionCreateOption, questionDeleteOption, questionEditQuestion, questionSetStandardAnswer} from "../../api";
export default {
  name:'ChoiceEdit',
  components:{draggable
  },
  data(){return{
    setStandard:false,
    setScore:false,
    score:0,
    radio:'',
    checked:[],
    answer:'',
  }},
  props:{
    item:Object,
    tt:Number,
  },
  watch:{
    tt:{
      handler(newVal){
        console.log(newVal);
        console.log("每次切换会重新加载吗!!!",this.item.id,this.item.score, typeof(this.item.score));
        this.setScore= (this.item.score>0)? true:false;
        this.score=this.item.score;
        if(this.item.standard_answer!=null){
          this.setStandard=true;
          if(this.item.type=='S'){
            this.radio=this.item.standard_answer;
            console.log("####",this.radio);
          }else if(this.item.type=='M'){
            this.checked=this.item.standard_answer;
          }else if(this.item.type=='F'){
            this.answer=this.item.standard_answer;
          }
        }
        this.$forceUpdate();

      }
    }
  },
  mounted() {
    console.log("每次切换会重新加载吗",this.item.id);
    this.setScore= (this.item.score>0)? true:false;
    this.score=this.item.score;
    if(this.item.standard_answer!=null){
      this.setStandard=true;
      if(this.item.type=='S'){
        this.radio=this.item.standard_answer;
        console.log("####",this.radio);
      }else if(this.item.type=='M'){
        this.checked=this.item.standard_answer;
      }else if(this.item.type=='F'){
        this.answer=this.item.standard_answer;
      }
    }
    this.$forceUpdate();
  },
  computed:{
    CsetScore:{
      get(){
        return this.setScore;
      },
      set(){
        this.setScore=!this.setScore;
        if(this.setScore)this.setStandard=true;
      }
    },
    CsetStandard:{
      get(){
        return this.setStandard;
      },
      set(){
        this.setStandard=!this.setStandard;
        if(!this.setStandard)this.setScore=false;
      }
    },
  },
  methods:{
    SaveQues:function (){
      questionEditQuestion(this.$store.state.uid,this.item.id,this.item.title,this.item.optional,this.item.remark,this.item.option).then(res=> {
        console.log(res);
      })
    },

    ccccc:function(){
      this.$forceUpdate();
      this.$emit('hehe');
    },
    SaveRadio:function (){

      questionSetStandardAnswer(this.$store.state.uid,this.item.id,this.radio,this.score).then(res=>{
        console.log(this.$store.state.uid,this.item.id,this.radio,this.score);
        console.log(res);
        if(res.error_code==0){console.log("成功保存答案");
        this.$emit('reloadarr');this.$forceUpdate();
        }
      })
    },
    SaveChecked:function (){
      console.log(this.$store.state.uid,this.item.id,this.checked,this.score)
      questionSetStandardAnswer(this.$store.state.uid,this.item.id,this.checked,this.score).then(res=>{
        console.log(this.$store.state.uid,this.item.id,this.checked,this.score);
        if(res.error_code==0){console.log("成功保存答案");this.$emit('reloadarr');this.$forceUpdate();}
      })
    },
    SaveAnswer:function (){
      questionSetStandardAnswer(this.$store.state.uid,this.item.id,this.answer,this.score).then(res=>{
        if(res.error_code==0){console.log("成功保存答案");this.$emit('reloadarr');this.$forceUpdate();}
      })
    },
    DelThisOption:function (op,pos){
      if(this.setStandard&&(op.id==this.radio||this.checked.includes(op.id))){
        this.$notify.error({
          title:'删除选项失败',
          message:'此选项包含在设定的正确答案中',
          duration:1000,
          position:'top-left'
        })
        return;
      }
      questionDeleteOption(this.$store.state.uid,this.item.id,op.id).then(res=>{
        console.log(res);
        this.item.option.splice(pos,1);
        this.$forceUpdate();
        this.$emit('hehe');
      })
    },
    AddAnOption:function (){
      var newOp=Object.create(null);
      newOp={...newOp};
      newOp.description='我是新增的选项';
      questionCreateOption(this.$store.state.uid,this.item.id,this.item.option.length,'我是新增的选项','').then(res=>{
        console.log(res);
        newOp.id=res.option_id;
        this.item.option.push(newOp);
        this.$forceUpdate();
        this.$emit('hehe');
      })
    },
  }
}
</script>

<style scoped>
.quesEditBox{
  text-align: left;
  padding: 30px 5px 30px 5px;
}
.words{
  font-weight:bold;
  margin-top:5px;
  margin-bottom: 15px;
  display: flex;
}
.divwords{
  font-weight:bold;
  margin-top:5px;
  margin-bottom: 15px;
}
.OP{
  padding-top:15px;
  padding-bottom: 15px;
}
.OPwords{
  font-weight:bold;
  margin-bottom: 10px;
  display: flex;
}

.quesAnOption{
  margin:0 0 0px 0;
  display: block;
}
.moveBall{
  cursor: grab;
}

.titleTip{
  font-size: 14px;
  width: 90px;
  height: 30px;
  line-height: 30px;
}
.ChecktitleTip{
  font-size: 14px;
  width: 70px;
  height: 20px;
  line-height: 20px;
}
.el-textarea >>> .el-textarea__inner{
  resize: vertical;
  padding: 5px 15px 0px 5px;
  line-height: 1.5;
  min-height: 30px !important;
  box-sizing: border-box;
  width: 100%;
  font-size: inherit;
  font-family: "微软雅黑 Light";
  color: black;
  background-color: transparent;
  background-image: none;
  border: none;
  border-bottom: 1px solid #DCDFE6;
  border-radius: 0px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}

.OpChosen{
  opacity: 0.2;
}
</style>